import Taro, { Component, Config, connectSocket } from '@tarojs/taro'
// import { View, Text, Image } from '@tarojs/components'
import { HTTP, baseurl } from './../../../common/index';
import { API } from './../../../common/API';
import { AtIcon, AtFab, AtCurtain, AtButton, AtImagePicker, AtInput, AtForm } from 'taro-ui'
import './index.less'
import { View } from '@tarojs/components';
// import curtainPng from '../../../assets/images/curtain.jpg'
export default class Index extends Component<any, any>{
  constructor() {
    super(...arguments)
    this.state = {
      files: []
    }
  }
  onChange(files) {
    console.log(files)
    this.setState({
      files
    })
  }
  handleChange(e) {
    console.log('11', e)
  }
  upLoadImages() {
    const uploadTask = Taro.uploadFile({
      url: baseurl + API.UPLOADFILE, //仅为示例，非真实的接口地址
      filePath: this.state.files[0].url,
      name: 'file',
      header: {
        'Authorization-token': Taro.getStorageSync('userInfo').token,
        'content-type': 'multipart/form-data'
      },
      formData: {
        file: this.state.files[0].url
      },
      success: function (res) {
        console.log(res)
      }
    })
    uploadTask.progress((res) => {
      console.log('上传进度', res.progress)
      console.log('已经上传的数据长度', res.totalBytesSent)
      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    })
    // uploadTask.abort() // 取消上传任务
  }
  onFail(mes) {
    console.log(mes)
  }
  onImageClick(index, file) {
    console.log(index, file)
  }
  componentWillMount() {
    console.log('componentWillMount')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
  }

  componentDidShow() {
    console.log('componentDidShow')
  }

  componentDidHide() {
    console.log('componentDidHide')
  }
  onButtonClick() {
    this.setState({
      isOpened: true
    })
  }
  /**
   * 指定config的类型声明为: Taro.Config  wxeb9503bf3c881e0e
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }
  render() {
    return (
      <View className='container'>
        <View className='item'>

        </View>
        <View className='item' style='margin-top:20rpx'>
          <AtForm>
            <AtInput
              name='value1'
              title='文本'
              type='text'
              placeholder='单行文本'
              value={this.state.value1}
              onChange={this.handleChange.bind(this)}
            />
            <AtInput
              name='value2'
              title='数字'
              type='number'
              placeholder='请输入数字'
              value={this.state.value2}
              onChange={this.handleChange.bind(this)}
            />
            <AtInput
              name='value3'
              title='密码'
              type='password'
              placeholder='密码不能少于10位数'
              value={this.state.value3}
              onChange={this.handleChange.bind(this)}
            />
            <AtInput
              name='value4'
              title='身份证'
              type='idcard'
              placeholder='身份证号码'
              value={this.state.value4}
              onChange={this.handleChange.bind(this)}
            />
            <AtInput
              name='value5'
              title='小数'
              type='digit'
              placeholder='请输入小数'
              value={this.state.value5}
              onChange={this.handleChange.bind(this)}
            />
            <AtInput
              name='value6'
              border={false}
              title='手机号码'
              type='phone'
              placeholder='手机号码'
              value={this.state.value6}
              onChange={this.handleChange.bind(this)}
            />
          </AtForm>
          <AtImagePicker
            files={this.state.files}
            onChange={this.onChange.bind(this)}
          />
          <AtButton onClick={this.upLoadImages.bind(this)} >上传图片</AtButton>
        </View >
      </View>
    )
  }
}
